<template>
  <div class="content">
    <ul class="biaot">
      <li>
        <div class="wz-hd">
          <a href="javascript:;">{{ datas.title }}</a>
          <span>{{ datas.author }}</span>
        </div>
        <div class="wz-db">
          <span>{{ content }}</span>
          <router-link to="/index/chaka2" @click="dataId(datas.id)">[查看详情]
          </router-link>
        </div>
      </li>
    </ul>
    <ul class="ding">
      <li class="shang" @click="fns()">上一页</li>
      <li v-for="(item,i) in total" :class="i==index?'com':''" :key="i">{{i+1}}</li>
      <li class="xia" @click="fn">下一页</li>
    </ul>
  </div>
</template>
<style scoped src='@/assets/css/journalism.css'>
</style>
<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue'
const { proxy } = getCurrentInstance()
const content = ref([])
const page = ref(1)
const datas = ref([])
const total = ref([])
const index = ref(0)
 async function data () {
    index.value = page.value - 1
// const page = ref(1)
const pagesize = ref(1)
const { data: res } = await proxy.$http.get('news_page_list?lang=en&page=' + page.value + '&pagesize=' + pagesize.value + '')
    if (res.code !== 1) {
    proxy.$ElMessage({
    showClose: true,
    message: '请求失败',
    type: 'error'
  })
  return false
 } else {
       total.value = res.msg.total
        console.log(res.msg[0], 1232123)
       content.value = res.msg[0].content.slice(0, 50)
      datas.value = res.msg[0]
      console.log(datas.value, 45465456)
 }
}
function fns () {
     if (page.value === 1) {
       alert('没有上一页')
       return
    }
     page.value--
     data()
}
function fn () {
    if (page.value === total.value) {
       alert('没有下一页')
       return
    }
     page.value++
     data()
}
function dataId (id) {
    proxy.$store.commit('idns', id)
}
onMounted(() => {
    data()
})
</script>
